<template>
  <view>
    <view class="van_top">
      <van-nav-bar title="新增收货地址" fixed left-arrow @click-left="onClickLeft" />
    </view>
    <view class="info">
      <view class="safe-area" :style="{ height: (statusBarHeight + 46) + 'px' }" style="width: 100%;"></view>
      <view class="content">
        <form @submit="onSubmit">
          <view class="card">
            <view class="title">
              <text class="txt1">地址信息</text>
              <view class="txt2">
                <van-checkbox :value="isChecked" checked-color="#FF1642"
                  @change="(e) => isChecked = e.detail">默认收货地址</van-checkbox>
              </view>
            </view>
            <view class="form">

              <van-field :value="addressForm.region" required :name="addressForm.region" size="large" title-width="64px" label="省市区域"
                placeholder="点击请选择" readonly @click-input="show = true">
              </van-field>
              <van-field :value="addressForm.address" required :name="addressForm.address" size="large" title-width="64px" label="详细地址"
                placeholder="请输入详细地址" @change="e => addressForm.address = e.detail" :maxlength="40">
              </van-field>
              <van-field :value="addressForm.receiverName" required :name="addressForm.receiverName" size="large" title-width="64px"
                label="收货人" placeholder="请输入收货人姓名" @change="e => addressForm.receiverName = e.detail" :maxlength="40">
              </van-field>
              <van-field :value="addressForm.receiverPhone" type="number" required :name="addressForm.receiverPhone" size="large" title-width="64px"
                label="手机号" placeholder="请输入收货人手机号" @change="e => addressForm.receiverPhone = e.detail" :maxlength="40">
              </van-field>
            </view>
          </view>
          <view class="btn-box">
            <button class="submit-btn" type="info" form-type="submit">
              保存地址
            </button>
          </view>
        </form>
      </view>
    </view>
    <van-popup :show="show" position="bottom" custom-style="height: 50%" @close="show = false" close-on-click-overlay
      safe-area-inset-bottom>
      <van-area :value="addressForm.regionId" :area-list="areaList" title="收货地址" @cancel="show = false"
        @confirm="regionConfirm" :swipe-duration="2000"/>
    </van-popup>
  </view>
</template>

<script>
import { reqAddAddress } from '@/apis/user'
import app from '@/App.vue'
import { areaList,useCascaderAreaData } from '@vant/area-data';
console.log(useCascaderAreaData());
import formRules from "@/utils/formRules.js"
export default {
  data() {
    return {
      statusBarHeight: app.globalData.statusBarHeight,
      show: false,
      areaList: areaList,
      addressForm: {
        region: '',
        regionId: '410102',
        address: '',
        receiverName: '',
        receiverPhone: '',
        isDefault: '1',
      },
      isChecked: false,
      rules: {
        regionId: [{ required: true, message: '请选择地址' }],
        address: [{ required: true, message: '请输入详细地址' }],
        receiverName: [{ required: true, message: '请输入收货人姓名' }],
        receiverPhone: [
          { required: true, message: '请输入手机号' },
          {
            pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
            message: '手机号格式错误'
          },
        ],
      },
    }
  },
  watch: {
    isChecked(val) {
      if (val) {
        this.addressForm.isDefault = '0'
      } else {
        this.addressForm.isDefault = '1'
      }
      console.log('val', val, this.addressForm.isDefault);
    }
  },
  methods: {
    onClickLeft() {
      uni.navigateBack();
    },
    regionConfirm(e) {
      let values = e.detail.values;
      let nameArr = [];
      let codeArr = [];
      values.forEach(item => {
        nameArr.push(item.name);
        codeArr.push(item.code);
      })
      this.addressForm.region = nameArr.join('/')
      this.addressForm.regionId = codeArr.join(',')
      this.show = false;
    },
    onSubmit(e) {
      let { rules, addressForm } = this;
      formRules(rules, addressForm, async (status) => {
        if (status) {
          console.log('校验通过')
          const res = await reqAddAddress({
            ...addressForm
          })
          if (res.code === 200) {
            uni.navigateBack();
          }
        }
      })
      console.log(this.pwdForm)
    },
    onChange(e) {
      console.log('e', e);
    }
  }
}
</script>

<style>
page {
  background: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.content {
  padding: 24rpx;

  .card {
    margin-bottom: 48rpx;
    padding: 24rpx;
    height: 572rpx;
    background: #FFFFFF;
    border-radius: 12rpx 12rpx 12rpx 12rpx;

    .title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 36rpx;
      font-size: 28rpx;
      color: #333333;

      .txt1 {
        font-weight: 600;
        font-size: 32rpx;
        color: #333333;
      }
    }

  }

  .btn-box {

    .submit-btn {
      width: 654rpx;
      height: 76rpx;
      line-height: 76rpx;
      font-size: 32rpx;
      color: #FFFFFF;
      letter-spacing: 1px;
      background: #FF1642;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      margin-bottom: 24rpx;
    }
  }
}

/deep/ .van-cell {
  margin-bottom: 36rpx;
}
</style>